<template>
  <div class="goods-details-container">
    <!-- 导航栏 -->
    <Navigator @returnUserInfo="getUserInfo" />

    <!-- 搜索 -->
    <Search :cartList="cartList"></Search>

    <!-- 主体 -->
    <div class="main">
      <div class="left">
        <el-image style="width: 450px" :src="goodsInfo.image"></el-image>
      </div>
      <div class="right">
        <div class="title">
          {{ goodsInfo.gName }}
        </div>

        <div class="description">
          {{ goodsInfo.description }}
        </div>
        <div class="price-container">
          <span class="head">价格</span>
          <div class="price-wrapper">
            <template v-if="goodsInfo.originalPrice > goodsInfo.discountPrice">
              <span class="original-price"
                >原价：<del>{{ goodsInfo.originalPrice }}</del></span
              >
              <span class="discount-price"
                >现价：{{ goodsInfo.discountPrice }}</span
              >
            </template>
            <template v-else>
              <span class="discount-price"
                >{{ goodsInfo.originalPrice }}</span
              >
            </template>
          </div>
        </div>

        <div class="seles-collection">
          <div class="sales">
            <span class="head">销售量</span>
            <span>{{ goodsInfo.sales }}</span>
          </div>

          <div class="collection">
            <span class="head">收藏量</span>
            <span>{{ goodsInfo.collectionRate }}</span>
          </div>
        </div>

        <div class="amount">
          <span class="head">数量</span>
          <el-input-number
            v-model="buyCount"
            @change="handleAmountChange"
            :min="1"
          ></el-input-number>
        </div>

        <div class="operation">
          <el-button @click="purchaseGoods">立即购买</el-button>
          <el-button @click="addToCart">加入购物车</el-button>
        </div>
      </div>
    </div>

    <!-- 脚部 -->
    <Footert />
  </div>
</template>

<script>
import Navigator from "@/components/navigator";
import Footert from "@/components/footer";
import Search from "@/components/search";
import { getCartItems, addGoodsToCart } from "@/api/cart";
import { getGoodsInfo } from "@/api/goods";
import { generateOrder } from "@/api/order";

export default {
  name: "GoodsDetailsIndex",
  components: { Navigator, Footert, Search },
  props: {},
  data() {
    return {
      cartList: [], // 用户购物车信息
      goodsInfo: {}, // 商品信息
      buyCount: 1, // 购买数量
      userInfo: {}, // 用户信息
    };
  },
  created() {
    // 加载商品信息
    this.loadGoodsInfo();
  },
  mounted() {},
  methods: {
    // 接收导航栏返回的userInfo
    getUserInfo(userInfo) {
      this.userInfo = userInfo;
      this.loadUserCartList();
    },
    // 获取购物车数据
    async loadUserCartList() {
      let userId = this.userInfo.userId;
      let { data } = await getCartItems(userId);
      if (Number(data.code) === 200) {
        this.cartList = data.data;
      }
    },
    // 处理商品数量改变
    handleAmountChange() {},
    // 获取商品信息
    async loadGoodsInfo() {
      let gId = this.$route.params.gId;
      const { data } = await getGoodsInfo(gId);
      if (Number(data.code) !== 200) {
        return this.$message.error("获取商品数据失败！");
      }
      this.goodsInfo = data.data;
    },
    // 加入商品到购物车
    async addToCart() {
      const { data } = await addGoodsToCart({
        userId: this.userInfo.userId,
        gId: this.goodsInfo.gId,
        count: this.buyCount,
      });
      if (Number(data.code) === 200) {
        this.$message.success(data.msg);
        this.loadUserCartList();
      }
    },
    // 立即购买
    purchaseGoods() {
      this.$confirm("您确定要下单当前商品么?")
        .then(async () => {
          this.goodsInfo.amount = this.buyCount;
          const { data } = await generateOrder(
            {
              userId: this.userInfo.userId,
              orderItemList: [this.goodsInfo],
            },
            false
          );
          if (Number(data.code) === 200) {
            this.$message.success("下单成功");
          }
        })
        .catch(() => {
          console.log("购买失败");
        });
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped lang="less">
.main {
  padding: 20px;
  min-width: 1000px;
  width: 60%;
  height: 500px;
  background: #fff;
  margin: 0 auto;
  border-radius: 20px;

  .left {
    float: left;
    width: 450px;
    height: 100%;
  }

  .right {
    font-size: 18px;
    width: 430px;
    margin-left: 20px;
    float: left;
    height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .head {
      display: inline-block;
      width: 80px;
    }

    .title {
      font-size: 20px;
      font-weight: 700;
    }

    .price-container {
      display: flex;
      align-items: center;
      .price-wrapper {
        .original-price {
          font-size: 18px;
          color: #ccc;
          margin-right: 110px;
        }
        .discount-price {
          font-size: 22px;
          color: #ff4400;
        }
      }
    }

    .seles-collection {
      display: flex;
      .collection {
        margin-left: 50px;
      }
    }

    .amount {
    }

    .operation {
    }
  }
}
</style>
